<template>
  <div>
	  <el-dialog v-if="seen"
	    :title="dTitle"
	    :visible.sync="centerDialogVisible"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:show-close="false"
	    width="30%"
	    center>
			<!-- 登录 -->
			<el-form v-show="loginOrRegist" v-model="registForm" ref="registForm"  label-width="80px">
				<el-form-item label="用户名">
			      <el-input
			      	placeholder="请输入邮箱"
			      	v-model="registForm.email">
			      </el-input>
			    </el-form-item>
				<el-form-item label="密码">
				    <el-input
				    	placeholder="请输入密码" 
				    	v-model="registForm.password"  
				    	show-password>
				    </el-input>
				</el-form-item>
			</el-form>
			<!-- 注册 -->
			<el-form v-show="!loginOrRegist"  v-model="registForm" ref="registForm"  label-width="80px">
				<el-form-item label="邮箱">
			      <el-input placeholder="请输入邮箱" v-model="registForm.email"></el-input>
			    </el-form-item>
				<el-form-item label="密码">
				    <el-input
				    	placeholder="请输入密码" 
				    	v-model="registForm.password"  
				    	show-password>
				    </el-input>
				</el-form-item>
				<el-form-item label="验证码">
				    <el-input style="width: 60%; margin-right: 15px;" placeholder="请输入邮箱验证码" v-model="registForm.code"></el-input>
					<el-button :disabled="disabled" @click="sendEmailCode">
						<span v-if="!isDisabledCountDown">获取验证码</span>
						<span v-if="isDisabledCountDown">{{countDown}}</span>
					</el-button>
				  </el-form-item>
			</el-form>
	    	
		
	    <span v-show="loginOrRegist" slot="footer" class="dialog-footer">
	      <el-button @click="clickDialog(0)">取 消</el-button>
	      <el-button type="primary" @click="clickDialog(1)">登 录</el-button>
		  <el-row v-if="loginOrRegist" class="wj-zm-footer">
		  	<el-col :xs="12" :sm="12" :md="12">还没有账号？<span @click="clickDialog(2)" class="wj-zm-footer-zc">免费注册</span></el-col>
		  	<el-col class="wj-zm-footer-zc wj-zm-footer-mm" :xs="12" :sm="12" :md="12">
				<span @click="clickDialog(4)">忘记密码</span>
			</el-col>
		  </el-row>
	    </span>
		<span v-show="!loginOrRegist" slot="footer" class="dialog-footer">
		  <el-button @click="clickDialog(0)">取 消</el-button>
		  <el-button type="primary" :loading="zcBtnLoading" @click="clickDialog(5)">注 册</el-button>
		  <el-row v-if="!loginOrRegist" class="wj-zm-footer">
		  	<el-col class="wj-zm-footer-mm" :xs="24" :sm="24" :md="24">
				已有账号？ <span @click="clickDialog(3)" class="wj-zm-footer-zc">立即登录</span>
			</el-col>
		  </el-row>
		</span>
	  </el-dialog>
	  <!-- 手机 -->
	  <el-dialog v-if="!seen"
	    :title="dTitle"
	    :visible.sync="centerDialogVisible"
	  		:close-on-click-modal="false"
	  		:close-on-press-escape="false"
	  		:show-close="false"
	    width="90%"
	    center>
	  			<!-- 登录 -->
	  			<el-form v-show="loginOrRegist" v-model="registForm" ref="registForm"  label-width="80px">
	  				<el-form-item label="邮箱">
	  			      <el-input
	  			      	placeholder="请输入邮箱"
	  			      	v-model="registForm.email">
	  			      </el-input>
	  			    </el-form-item>
	  				<el-form-item label="密码">
	  				    <el-input
	  				    	placeholder="请输入密码" 
	  				    	v-model="registForm.password"  
	  				    	show-password>
	  				    </el-input>
	  				</el-form-item>
	  			</el-form>
	  			<!-- 注册 -->
	  			<el-form v-show="!loginOrRegist"  v-model="registForm" ref="registForm"  label-width="80px">
	  				<el-form-item  label="邮箱">
	  				    <el-input v-model="registForm.email"></el-input>
	  				</el-form-item>
	  				<el-form-item label="密码">
	  				    <el-input
	  				    	placeholder="请输入密码" 
	  				    	v-model="registForm.password"  
	  				    	show-password>
	  				    </el-input>
	  				</el-form-item>
	  				
	  				<el-form-item label="验证码">
	  				    <el-input style="width: 50%; margin-right: 8px;" placeholder="请输入邮箱验证码" v-model="registForm.code"></el-input>
						<el-button :disabled="disabled" @click="sendEmailCode">
							<span v-if="!isDisabledCountDown">获取验证码</span>
							<span v-if="isDisabledCountDown">{{countDown}}</span>
						</el-button>
	  				  </el-form-item>
	  			</el-form>
	    	
	  		
	    <span v-show="loginOrRegist" slot="footer" class="dialog-footer">
	      <el-button @click="clickDialog(0)">取 消</el-button>
	      <el-button type="primary" @click="clickDialog(1)">登 录</el-button>
	  		  <el-row v-if="loginOrRegist" class="wj-zm-footer">
	  		  	<el-col :xs="12" :sm="12" :md="12">还没有账号？<span @click="clickDialog(2)" class="wj-zm-footer-zc">免费注册</span></el-col>
	  		  	<el-col class="wj-zm-footer-zc wj-zm-footer-mm" :xs="12" :sm="12" :md="12">
					<span @click="clickDialog(4)">忘记密码</span>
				</el-col>
	  		  </el-row>
	    </span>
	  		<span v-show="!loginOrRegist" slot="footer" class="dialog-footer">
	  		  <el-button @click="clickDialog(0)">取 消</el-button>
	  		  <el-button type="primary" :loading="zcBtnLoading" @click="clickDialog(5)">注 册</el-button>
	  		  <el-row v-if="!loginOrRegist" class="wj-zm-footer">
	  		  	<el-col class="wj-zm-footer-mm" :xs="24" :sm="24" :md="24">
	  				已有账号？ <span @click="clickDialog(3)" class="wj-zm-footer-zc">立即登录</span>
	  			</el-col>
	  		  </el-row>
	  		</span>
	  </el-dialog>
  </div>
</template>
<script>
	import axios from "axios";
	import Vue from 'vue'
	import {baseUrl} from '../utils/global.js'
    export default {
        name: 'Login',
		props: {
		    centerDialogVisible: {
		      required: false,
		      default: false,
		    },
			isLogin: {
			  required: false,
			  default: true,
			},
			title: {
			  required: false,
			  default: "欢迎登录",
			},
		    
		},
        data () {
            return {
				seen: true,
				loginOrRegist: true,
				dTitle: "",
				disabled: false, // 按钮是否可用
				countDown: 60, // 倒计时时间（单位：秒）
				isDisabledCountDown: false, // 是否开启倒计时
				zcBtnLoading: false, //注册按钮是否开启loading
				registForm: {
				  password: "",
				  email: '',
				  code: "",
				}
            }
			
        },
		methods:{
			clickDialog(e) {
				if(e == 2){
					this.loginOrRegist = false
					this.dTitle = "欢迎注册"
				} else if (e == 3){
					this.loginOrRegist = true
					this.dTitle = "欢迎登录"
				} else if (e == 5){
					this.regist()
					const resData = {"index": e, "isCloseD": true}
					this.$emit('click', resData)
				} else if (e == 4){
					const resData = {"index": e, "isCloseD": false}
					this.$emit('click', resData)
					/* 忘记密码 */
					this.$router.push({name: "ForgetPassword"});
				} else if (e == 1){
					if(this.registForm.email==""){
						this.$message.error("邮箱不能为空")
						return
					}
					if(this.registForm.password==""){
						this.$message.error("密码不能为空")
						return
					} else {
						if(this.registForm.password.length < 6 || this.registForm.password.length > 30){
							this.$message.error("密码长度在 6 到 30 个字符")
							return
						}
					}
					let data = new FormData();
					data.append('username', this.registForm.email);
					data.append('password', this.registForm.password);
					axios.post(baseUrl + "/user/login/", data)
					.then((res) => {
						if(res.status == 200){
							this.$message({
							message: "登录成功",
							type: "success",
							duration: 1500,
							});
							Vue.$cookies.set('token', res.data.access_token, 86400);
							Vue.$cookies.set('username', this.registForm.email, 86400);
							this.$store.state.isLogin = "true";
							this.$store.state.username = this.registForm.email;
							this.registForm.email = "";
							this.registForm.password = "";
							this.registForm.code = "";
							const resData = {"index": e, "isCloseD": true}
							this.$emit('click', resData)
						}
					})
					.catch((res) => {
						this.$message.error(res.response.data.detail)
					});
				} else if (e == 0){
					const resData = {"index": e, "isCloseD": false}
					this.$emit('click', resData)
				}
				
				
				
			},
			/* 发送验证码 */
			sendEmailCode(){
				
				if(this.registForm.email==""){
					this.$message.error("邮箱不能为空");
					return
				} else {
					const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
					if (!mailReg.test(this.registForm.email)) {
						this.$message.error("邮箱格式不正确")
						return
					}
				}
				this.disabled = true
				axios.get(baseUrl + "/user/send_code", {
					params: { email: this.registForm.email }
				}).then(res => {
					if(res.status == 200){
						this.$message({
						message: "验证码发送成功",
						type: "success",
						duration: 1500,
						});
						this.isDisabledCountDown = true
						this.startCountDown()
					}
				})
				.catch(res => {
				  this.$message.error(res.response.data.detail);
				  this.disabled = false; // 禁用按钮
				});
				
			},
			/* 注册 */
			regist(){
				if(this.registForm.email==""){
					this.$message.error("邮箱不能为空")
					return
				}else {
					const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
					if (!mailReg.test(this.registForm.email)) {
						this.$message.error("邮箱格式不正确")
						return
					}
				}
				if(this.registForm.password==""){
					this.$message.error("密码不能为空")
					return
				}
				if(this.registForm.code==""){
					this.$message.error("验证码不能为空")
					return
				}
				this.zcBtnLoading = true
				let data = {
				  "username": this.registForm.email,
				  "password": this.registForm.password,
				  "code": this.registForm.code
				}
				axios.post(baseUrl + "/user/register", data)
				.then((res) => {
					if(res.status == 200){
						this.$message({
							message: "注册成功",
							type: "success",
							duration: 1500,
						});
						this.zcBtnLoading = false;
						/* this.loginOrRegist = true
						this.dTitle = "欢迎登录" */
						Vue.$cookies.set('token', res.data.access_token, 86400);
						Vue.$cookies.set('username', this.registForm.email, 86400);
						this.$store.state.isLogin = "true";
						this.$store.state.username = this.registForm.email;
						this.registForm.email = "";
						this.registForm.password = "";
						this.registForm.code = "";
					}
				})
				.catch((res) => {
					if(res.response.status == 422){
						this.$message.error(res.response.data.detail[0].msg);
					}else{
						this.$message.error(res.response.data.detail);
					}
					this.zcBtnLoading = false
				  
				});
			},
			
			menuSeen(){
			    // 屏幕尺寸
			    let screenHeight=document.body.clientWidth;
			    if(screenHeight>415){
			        this.seen=true;
			    }else{
			        this.seen=false;
			    }
			},
			/* 按钮倒计时 */
			startCountDown() {
			    let timer = setInterval(() => {
			      if (this.countDown > 0) {
			        this.countDown--;
			      } else {
			        clearInterval(timer);
			        this.disabled = false; // 启用按钮
					this.isDisabledCountDown = false;
			        this.countDown = 60; // 重置倒计时时间
			      }
			    }, 1000);
			}
			
			
		},
		watch: {
		    isLogin(val){
				this.loginOrRegist = val
			},
			title(val){
				this.dTitle = val
				console.log("监听数据：" + this.dTitle)
			},
		},
		mounted() {
		    this.menuSeen()
		},
		
		
    }
</script>

<style scoped>
	.wj-zm-footer {
		margin-top: 20px;
		font-size: 12px!important;
		text-align: left;
	}
	.wj-zm-footer-zc {
		color: #0056ff;
	}
	.wj-zm-footer-mm {
		text-align: right;
	}
  
</style>